
import React, { useState } from 'react';
import { EllipsisOutlined, SearchOutlined, PlusOutlined } from '@ant-design/icons';
import dayjs from 'dayjs'
import './notFound.css'
import {
    Divider, Radio, Table, Popover, Button, Tooltip, Modal, Checkbox, Form, Input, Col, Row, Select
} from 'antd';
const text = '';

const buttonWidth = 70;


// 表格的一些方法集合
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User',
        // Column configuration not to be checked
        name: record.name,
    }),
};
const content = (
    <div>
        <Button type="link" size='small'>编辑</Button>
        <Button type="link" size='small'>删除</Button>
    </div>
);

const onFinish = (values) => {
    console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

const options = [
    {
        label: '管理员',
        value: '1'
    },
    {
        label: '员工',
        value: '2'
    },
    {
        label: '运维',
        value: '3'
    },
    {
        label: '访客',
        value: '4'
    }
];
const handleChange = (value) => {
    console.log(`selected ${value}`);
};
const columns = [
    {
        title: '用户名',
        dataIndex: 'username',
        render: (text) => <a>{text}</a>,
    },
    {
        title: '角色类型',
        dataIndex: 'roletype',
        render: (_, record) => (
            <span>
                {
                    // console.log(record)
                    record.roletype.map((item) => {
                        let arr = '';
                        if (item === '1') {
                            arr = '管理员';
                        } else if (item === '2') {
                            arr = '员工'
                        }
                        else if (item === '3') {
                            arr = '运维'
                        }
                        else if (item === '4') {
                            arr = '访客'
                        }
                        return (
                            <span>
                                {
                                    arr.toUpperCase()
                                }&nbsp;
                            </span>
                        );
                    })
                }
            </span>
        ),
    },
    {
        title: '手机号',
        dataIndex: 'phone',
    },
    {
        title: 'Operation',
        key: 'operation',
        render: (_, record) => (
            <Popover placement="bottomLeft" title={text} content={content} trigger="click">
                <EllipsisOutlined />
            </Popover>
        ),
    },
];
const data = [
    {
        key: '1',
        username: '张三',
        roletype: ['1', '3'],
        phone: '1008611'
    },
    {
        key: '2',
        username: '李四',
        roletype: ['2'],
        phone: '1008711'
    },
    {
        key: '3',
        username: '王五',
        roletype: ['1'],
        phone: '234198'
    },
    {
        key: '4',
        username: '鹤三',
        roletype: ['1'],
        phone: '111111111111'
    },
];
const NotFound = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modelTitle, setModelTitle] = useState('新增')
    const [form] = Form.useForm();
    const showModal = () => {
        setIsModalOpen(true);
        setModelTitle('新增')

    };
    const showModalUpate = () => {
        setIsModalOpen(true);
        setModelTitle('修改')
    };
    const handleOk = () => {
        setIsModalOpen(false);
        const formData = form.getFieldValue()

        data.push({
            key: (data.length+1).toString(),
            username: formData.username,
            roletype:formData.roletype,
            phone: formData.phone
        })
        console.log(formData)
        console.log(data)
    };
    const handleCancel = () => {
        setIsModalOpen(false);
        form.resetFields();
    };
    const style = {
        // background: '#0092ff',
        padding: '8px 0',
    };
    return (
        <>
            <div>
                <Tooltip title="新增" onClick={showModal}>
                    <Button type="primary" icon={<PlusOutlined />}>
                        新增
                    </Button>
                </Tooltip>

                <Divider />

                <Table
                    rowSelection={{
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                />

                <Modal title={modelTitle} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width='800px'>
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 8, }}
                        wrapperCol={{ span: 12, }}
                        style={{ maxWidth: 800, }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Row gutter={[16, 0]}>
                            <Col className="gutter-row" span={12}>
                                <div style={style}>
                                    <Form.Item
                                        label="用户名"
                                        name="username"
                                        rules={[{ required: true, message: '请输入用户名!', },]}
                                    >
                                        <Input />
                                    </Form.Item>
                                </div>
                            </Col>
                            <Col className="gutter-row" span={12}>
                                <div style={style}>
                                    <Form.Item
                                        label="密码"
                                        name="password"
                                        rules={[{ required: true, message: '请输入密码!', },]}
                                    >
                                        <Input.Password />
                                    </Form.Item>
                                </div>
                            </Col>
                            <Col className="gutter-row" span={12}>
                                <div style={style}>
                                    <Form.Item
                                        label="角色类型"
                                        name="roletype"
                                        rules={[{ required: true, message: '请选择角色类型!', },]}
                                    >
                                        <Select
                                            mode="multiple"
                                            allowClear
                                            style={{
                                                width: '100%',
                                            }}
                                            placeholder="Please select"
                                            defaultValue={[]}
                                            onChange={handleChange}
                                            options={options}
                                        />
                                    </Form.Item>
                                </div>
                            </Col>
                            <Col className="gutter-row" span={12}>
                                <div style={style}>
                                    <Form.Item
                                        label="手机号"
                                        name="phone"
                                        rules={[{ required: true, message: '请输入手机号!', },]}
                                    >
                                        <Input />
                                    </Form.Item>
                                </div>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </div>

        </>
    )
}
export default NotFound